<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="codec" uri="/WEB-INF/tld/codec.tld"%>
<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
	<div class="row-fluid">
				<div class="box">
					<div class="title">
 						<h4>
							<span class="icon16 icomoon-icon-filter"></span> <span>Filter</span>
						</h4>
						<a href="#" class="minimize">Minimize</a>
					</div>
					<div class="content clearfix form-horizontal">

						<div class="form-row row-fluid">
							<div class="span4">
								<label class="form-label span6">First Name</label> <input
									class="span6 filterdata" type="text" field="firstName" op="cn" />
							</div>
							<div class="span4">
								<label class="form-label span6">Last Name</label> <input
									class="span6 filterdata" type="text" field="lastName" op="cn" />
							</div>
							
							<div class="span4">
								<label class="form-label span6">TrxTypes</label>
								<div class="span6 controls">
										<select field="trxType" class="filterdata" op="eq">
										<option value="">====================</option>
										 <c:if
														test="${not empty trxTypes}">
														<c:forEach var="single" items="${trxTypes}">
															<option value="${single}">${single}</option>
														</c:forEach>
										</c:if>

									</select>
								</div>
							</div>
							
						</div>

						<div class="form-row row-fluid">
							<div class="span4">
								<label class="form-label span6">Status</label>
								<div class="span6 controls">
										<select field="status" class="filterdata" op="eq">
										<option value="">====================</option>
										 <c:if
														test="${not empty statuses}">
														<c:forEach var="single" items="${statuses}">
															<option value="${single}">${single}</option>
														</c:forEach>
										</c:if>

									</select>
								</div>
							</div>
							<div class="span4">
							 
								<label class="form-label span6">NRIC / FIN No. or ROC / UEN No.</label>
								 <input
									class="span6 filterdata" type="text" field="nric" op="cn" />
 							</div>
 							
 									<div class="span4">
								<label class="form-label span6">Donate Type</label>
								<div class="span6 controls">
										<select field="type" class="filterdata" op="eq">
										<option value="">====================</option>
										 <c:if
														test="${not empty donateTypes}">
														<c:forEach var="single" items="${donateTypes}">
															<option value="${single}">${single}</option>
														</c:forEach>
										</c:if>

									</select>
								</div>
							</div>
 							
 							
 							
 						</div>
						<div class="form-row row-fluid">
							<div class="span4">
								<label class="form-label span6">Date added From</label> <input
									class="filterdata span6 datepicker" type="text" field="donateDate" op="ge" />
							</div>
								<div class="span4">
								<label class="form-label span6">Date added To</label> <input
									class="filterdata span6 datepicker" type="text" field="donateDate" op="le" />
							</div>
 						</div>
						<hr />


					</div>
				</div>
		 
		</div>
<div class="row-fluid">
	<div class="span12">
		<div class="box gradient">
			<div class="title">
				<h4>
					<span>Donor Info Manager </span> <span class="box-form right">
					</span>
				</h4>


				<a href="#" class="minimize"></a>
			</div>

			<div class="content scrollable clearfix">
				<table class="ajaxTable display table table-bordered">
					<thead>
						<tr>
							<th><a class="select_all"><span class="icomoon-icon-checkmark-2"></span></a></th>
<th>Status </th>
<th>Px Code </th>
<th>Salutation </th>
<th>FirstName </th>
<th>LastName </th>
<th>CompanyName </th>
<th>Email </th>
<th>PhoneNo </th>
<th>Nric </th>
<th>RefNo </th>
<th>Amount </th>
<th>TrxType </th>
<th>Type </th>
<th>Address </th>
<th>PostalCode </th>
<th>Commitment </th>
<th>DonateDate </th>
 							<th>Operation</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
 	<script type="text/javascript">
		var render = false;

		$(document).ready(function() {
			johnny.oTable = $('.ajaxTable').dataTable({
				"aoColumnDefs" : [ {
					'bSortable' : false,
					'aTargets' : [ 0 ]
				} ],
				"bLengthChange" : true,
				"sAjaxSource" : '${ctx}/admin/donate-info/',
				"fnInitComplete" : function(oSettings, json) {
				}
			});
			var name = $("<input>").attr({
				type : "text",
				field : "name",
				op : "cn",
				placeholder : "Name",
				class : "filterdata"
			});
			johnny.initTableQuery();
			
			var del = {
			id : 'donateInfoDel',
			text  : 'Del',
			domain : "Donate Info",
			operation : "Del",
			url : "${ctx}/admin/donate-info/del/" 			};
			johnny.tableBtn(del);
 		});

		var columnHeader = [ '', 'status','pxCode','salutation','firstName','companyName','lastName','email','phoneNo','nric','refNo','amount','trxType','type','address','postalCode','commitment','donateDate' ];
		var QueryData = function(aoData) {
			return johnny.initQueryData(aoData, columnHeader);
		}

		var DataTableForm = function(json, echo) {
			var dataArray = new Array();
			for ( var i = 0; i < json.result.length; i++) {
				var link = "${ctx}/admin/donate-info/"+json.result[i].id+"/edit/";
				var subArray = new Array();
				var value = johnny.getForSelect(json.result[i].id);
				subArray.push(value);
				subArray.push(json.result[i].status)
								subArray.push(json.result[i].pxCode)
subArray.push(json.result[i].salutation)
subArray.push(json.result[i].firstName)
subArray.push(json.result[i].lastName)
subArray.push(json.result[i].companyName)
subArray.push(json.result[i].email)
subArray.push(json.result[i].phoneNo)
subArray.push(json.result[i].nric)
subArray.push(json.result[i].refNo)
subArray.push(json.result[i].amount)
subArray.push(json.result[i].trxType)
subArray.push(json.result[i].type)
subArray.push(json.result[i].address)
subArray.push(json.result[i].postalCode)
subArray.push(json.result[i].commitment)
subArray.push(json.result[i].donateDate)
   				subArray.push(johnny.getEditHtml(link));
 				dataArray.push(subArray);
			}
			return {
				sEcho : echo,
				iTotalRecords : json.totalCount,
				iTotalDisplayRecords : json.totalCount,
				aaData : dataArray
			};
		}

	 
	</script>
 	<a href="${ctx}/admin/donate-info/create/" class="btn btn-info"> <span
		class="icon12 icomoon-icon-plus white"></span> New</a>
</div>
